<template>
    <el-select
        v-model="value"
        filterable
        remote
        :placeholder="placeholder"
        :remote-method="remoteMethod"
        :loading="loading"
        reserve-keyword
        @visible-change='visibleChange'
        @change="handleChange"
        popper-class='colorSelect'
        :disabled="disabled"
        >
        <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.label"
            :value="item.value">
            <template v-if="prop == 'workOrderCode'">
                <div class="code">{{item.value}}</div>
                <span class="product">{{item.product.code}}-{{item.product.name}}-{{item.product.specification}}</span>
            </template>
        </el-option>
    </el-select>
</template>

<script>
    import request from '@/utils/request'
    export default {
        data(){
            return{
                options: [],
                value: '',
                loading: false,
            }
        },
        props:{
            placeholder:{
                type:String,
                default:''
            },
            url:{
                type:String,
                default:''
            },
            prop:{
                type:String,
                default:''
            },
            workOrderCode:{
                type:String,
                default:''
            },
            proCode:{
                type:String,
                default:''
            },
            disabled:{
                type:Boolean,
                default:true
            },
            code:[String,Number],
        },
        mounted() {
        },
        methods: {
            getUrl(data) {
                return request({
                    url:this.url,
                    method: 'post',
                    data
                })
            },
            getDataList(data) {
                this.getUrl(data).then(res => {
                    this.loading = false;
                    if(res.code == 200) {
                        this.options = res.data.map(item => {
                            if(this.prop == 'workOrderCode'){
                                return{
                                    id:item.id,
                                    value: item.code,
                                    label: item.code,
                                    product: item.product,
                                    processesList:item.processesList
                                }
                            }else{
                                return{
                                    id:item.id,
                                    value: item.id,
                                    label: item.name,
                                }
                            }
                        });
                        if(this.code) this.value = this.code
                    }
                })
            },
            //下拉框打开时
            visibleChange(flag){
                if(flag) this.remoteMethod('')
            },
            remoteMethod(query) {
                this.loading = true;
                if(this.prop == 'workOrderCode'){
                    this.getDataList({search:query})
                }else{
                    this.getDataList({code:this.proCode,name:query})
                }
            },
            //工单编号每次切换时置空工序名称
            setValue(){
                this.value = ''
            },
            
            handleChange(v){
                if(this.prop == 'workOrderCode'){
                    let product = []
                    let processesList = []
                    let findData = this.options.find(i => i.value == v)
                    product = findData.product
                    processesList = findData.processesList
                    this.$emit('handleChange',{v,prop:this.prop,product,processesList})
                }else{
                    let findData = this.options.find(i => i.id == v)
                    this.$emit('handleChange',{v,prop:this.prop,name:findData.label})
                }
            },
            reset(){
                this.value = ''
            }
        },
    }
</script>